<template>
  <div class="toast" v-show="isshow">
    <div>{{message}}</div>
  </div>
</template>

<script>
export default {
  name: "Toast",
  data(){
    return{
      message:'',
      isshow:false
    }
  },
  methods:{
    show(message='未选择',duration=2000){
      this.isshow=true
      this.message=message

      setTimeout(()=>{
        this.isshow=false
        this.message=''
      },duration)
    }
  }
}
</script>

<style scoped>
  .toast{
    position: fixed;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    z-index: 10;
    padding:8px 10px;
    color:#ffffff;
    background-color: rgba(0,0,0,.75);
    border-radius: 5px;
  }
</style>
